React 일괄 업데이트: 성능을 위한 상태 변경 최적화

React의 성능은 부드럽고 반응성이 뛰어난 사용자 인터페이스를 만드는 데 매우 중요합니다. React가 성능을 최적화하기 위해 사용하는 핵심 메커니즘 중 하나는 일괄 업데이트(batched updates)입니다. 이 기술은 여러 상태 업데이트를 단일 리렌더링 주기로 그룹화하여 불필요한 리렌더링 횟수를 크게 줄이고 전반적인 애플리케이션 반응성을 향상시킵니다. 이 글에서는 React의 일괄 업데이트의 복잡성을 깊이 파고들어, 작동 방식, 이점, 한계, 그리고 고성능 React 애플리케이션을 구축하기 위해 이를 효과적으로 활용하는 방법을 설명합니다.

React의 렌더링 프로세스 이해하기

일괄 업데이트에 대해 알아보기 전에 React의 렌더링 프로세스를 이해하는 것이 중요합니다. 컴포넌트의 상태가 변경될 때마다 React는 해당 컴포넌트와 그 자식들을 리렌더링하여 사용자 인터페이스에 새로운 상태를 반영해야 합니다. 이 과정은 다음 단계를 포함합니다:

1. 상태 업데이트: 컴포넌트의 상태가 setState 메서드(또는 useState와 같은 훅)를 사용하여 업데이트됩니다.
2. 재조정(Reconciliation): React는 새로운 가상 DOM을 이전의 것과 비교하여 차이점("diff")을 식별합니다.
3. 커밋(Commit): React는 식별된 차이점을 기반으로 실제 DOM을 업데이트합니다. 이 단계에서 변경 사항이 사용자에게 보여집니다.

리렌더링은 특히 깊은 컴포넌트 트리를 가진 복잡한 컴포넌트의 경우 계산 비용이 많이 드는 작업일 수 있습니다. 잦은 리렌더링은 성능 병목 현상과 느린 사용자 경험으로 이어질 수 있습니다.

일괄 업데이트란 무엇인가?

일괄 업데이트는 React가 여러 상태 업데이트를 단일 리렌더링 주기로 그룹화하는 성능 최적화 기술입니다. 각 개별 상태 변경 후에 컴포넌트를 리렌더링하는 대신, React는 특정 범위 내의 모든 상태 업데이트가 완료될 때까지 기다렸다가 단일 리렌더링을 수행합니다. 이는 DOM이 업데이트되는 횟수를 크게 줄여 성능을 향상시킵니다.

일괄 업데이트의 작동 방식

React는 다음과 같이 제어된 환경 내에서 발생하는 상태 업데이트를 자동으로 일괄 처리합니다:

• 이벤트 핸들러: onClick, onChange, onSubmit과 같은 이벤트 핸들러 내의 상태 업데이트는 일괄 처리됩니다.
• React 생명주기 메서드 (클래스 컴포넌트): componentDidMount 및 componentDidUpdate와 같은 생명주기 메서드 내의 상태 업데이트도 일괄 처리됩니다.
• React 훅: 이벤트 핸들러에 의해 트리거되는 useState 또는 커스텀 훅을 통한 상태 업데이트는 일괄 처리됩니다.

이러한 컨텍스트 내에서 여러 상태 업데이트가 발생하면 React는 이를 대기열에 추가한 다음 이벤트 핸들러나 생명주기 메서드가 완료된 후에 단일 재조정 및 커밋 단계를 수행합니다.

예시:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default Counter;

이 예시에서 "Increment" 버튼을 클릭하면 handleClick 함수가 트리거되어 setCount를 세 번 호출합니다. React는 이 세 번의 상태 업데이트를 단일 업데이트로 일괄 처리합니다. 결과적으로 컴포넌트는 한 번만 리렌더링되며, 각 setCount 호출마다 1씩이 아니라 count가 3만큼 증가하게 됩니다. 만약 React가 업데이트를 일괄 처리하지 않았다면 컴포넌트는 세 번 리렌더링되어 비효율적일 것입니다.

일괄 업데이트의 이점

일괄 업데이트의 주요 이점은 리렌더링 횟수를 줄여 성능을 개선하는 것입니다. 이는 다음과 같은 결과로 이어집니다:

• 더 빠른 UI 업데이트: 리렌더링이 줄어들면 사용자 인터페이스 업데이트가 빨라져 애플리케이션의 반응성이 향상됩니다.
• DOM 조작 감소: DOM 업데이트 빈도가 줄어들면 브라우저의 작업량이 줄어들어 성능이 향상되고 리소스 소비가 감소합니다.
• 전반적인 애플리케이션 성능 향상: 일괄 업데이트는 특히 상태 변경이 잦은 복잡한 애플리케이션에서 더 부드럽고 효율적인 사용자 경험에 기여합니다.

일괄 업데이트가 적용되지 않는 경우

React가 많은 시나리오에서 업데이트를 자동으로 일괄 처리하지만, 일괄 처리가 발생하지 않는 상황도 있습니다:

• 비동기 작업 (React의 제어 범위 밖): setTimeout, setInterval 또는 프로미스와 같은 비동기 작업 내에서 수행되는 상태 업데이트는 일반적으로 자동으로 일괄 처리되지 않습니다. 이는 React가 이러한 작업의 실행 컨텍스트를 제어할 수 없기 때문입니다.
• 네이티브 이벤트 핸들러: 네이티브 이벤트 리스너(예: addEventListener를 사용하여 DOM 요소에 직접 리스너를 첨부하는 경우)를 사용하는 경우, 해당 핸들러 내의 상태 업데이트는 일괄 처리되지 않습니다.

예시 (비동기 작업):

import React, { useState } from 'react';

function DelayedCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
      setCount(count + 1);
      setCount(count + 1);
    }, 0);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default DelayedCounter;

이 예시에서는 setCount가 연속으로 세 번 호출되지만, setTimeout 콜백 내에 있습니다. 결과적으로 React는 이러한 업데이트를 일괄 처리하지 *않으며*, 컴포넌트는 세 번 리렌더링되고 각 리렌더링에서 카운트가 1씩 증가합니다. 이 동작은 컴포넌트를 적절하게 최적화하기 위해 이해하는 것이 매우 중요합니다.

`unstable_batchedUpdates`로 일괄 업데이트 강제하기

React가 자동으로 업데이트를 일괄 처리하지 않는 시나리오에서는 react-dom의 unstable_batchedUpdates를 사용하여 일괄 처리를 강제할 수 있습니다. 이 함수를 사용하면 여러 상태 업데이트를 단일 배치로 묶어 단일 리렌더링 주기에서 함께 처리되도록 할 수 있습니다.

참고: unstable_batchedUpdates API는 불안정한 것으로 간주되며 향후 React 버전에서 변경될 수 있습니다. 주의해서 사용하고 필요한 경우 코드를 조정할 준비를 해야 합니다. 그러나 일괄 처리 동작을 명시적으로 제어하는 데 유용한 도구로 남아 있습니다.

예시 (`unstable_batchedUpdates` 사용):

import React, { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom';

function DelayedCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      unstable_batchedUpdates(() => {
        setCount(count + 1);
        setCount(count + 1);
        setCount(count + 1);
      });
    }, 0);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default DelayedCounter;

이 수정된 예시에서는 unstable_batchedUpdates를 사용하여 setTimeout 콜백 내의 세 setCount 호출을 감쌉니다. 이렇게 하면 React가 이러한 업데이트를 일괄 처리하도록 강제하여 단일 리렌더링이 발생하고 카운트가 3만큼 증가합니다.

React 18과 자동 일괄 처리

React 18은 더 많은 시나리오에 대해 자동 일괄 처리를 도입했습니다. 이는 React가 타임아웃, 프로미스, 네이티브 이벤트 핸들러 또는 기타 모든 이벤트 내에서 발생할 때에도 상태 업데이트를 자동으로 일괄 처리한다는 것을 의미합니다. 이는 성능 최적화를 크게 단순화하고 unstable_batchedUpdates를 수동으로 사용할 필요성을 줄여줍니다.

예시 (React 18 자동 일괄 처리):

import React, { useState } from 'react';

function DelayedCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
      setCount(count + 1);
      setCount(count + 1);
    }, 0);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default DelayedCounter;

React 18에서는 위 예제가 setTimeout 내에 있음에도 불구하고 setCount 호출을 자동으로 일괄 처리합니다. 이는 React의 성능 최적화 기능에 있어 상당한 개선입니다.

일괄 업데이트 활용을 위한 모범 사례

일괄 업데이트를 효과적으로 활용하고 React 애플리케이션을 최적화하려면 다음 모범 사례를 고려하십시오:

• 관련 상태 업데이트 그룹화: 가능할 때마다 관련된 상태 업데이트를 동일한 이벤트 핸들러나 생명주기 메서드 내에서 그룹화하여 일괄 처리의 이점을 극대화하십시오.
• 불필요한 상태 업데이트 피하기: 컴포넌트의 상태를 신중하게 설계하고 사용자 인터페이스에 영향을 미치지 않는 불필요한 업데이트를 피하여 상태 업데이트 횟수를 최소화하십시오. props가 변경되지 않은 컴포넌트의 리렌더링을 방지하기 위해 메모이제이션(예: React.memo)과 같은 기술을 사용하는 것을 고려하십시오.
• 함수형 업데이트 사용: 이전 상태를 기반으로 상태를 업데이트할 때는 함수형 업데이트를 사용하십시오. 이렇게 하면 업데이트가 일괄 처리될 때에도 올바른 상태 값으로 작업할 수 있습니다. 함수형 업데이트는 setState(또는 useState의 setter)에 이전 상태를 인수로 받는 함수를 전달합니다.
• 비동기 작업 유의하기: 이전 버전의 React(18 이전)에서는 비동기 작업 내의 상태 업데이트가 자동으로 일괄 처리되지 않는다는 점에 유의하십시오. 필요한 경우 unstable_batchedUpdates를 사용하여 일괄 처리를 강제하십시오. 그러나 새로운 프로젝트의 경우 자동 일괄 처리의 이점을 활용하기 위해 React 18로 업그레이드하는 것이 강력히 권장됩니다.
• 이벤트 핸들러 최적화: 이벤트 핸들러 내의 코드를 최적화하여 렌더링 프로세스를 늦출 수 있는 불필요한 계산이나 DOM 조작을 피하십시오.
• 애플리케이션 프로파일링: React의 프로파일링 도구를 사용하여 성능 병목 현상과 일괄 업데이트를 추가로 최적화할 수 있는 영역을 식별하십시오. React DevTools의 Performance 탭은 리렌더링을 시각화하고 개선 기회를 식별하는 데 도움이 될 수 있습니다.

예시 (함수형 업데이트):

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default Counter;

이 예시에서는 함수형 업데이트를 사용하여 이전 값을 기반으로 count를 증가시킵니다. 이렇게 하면 업데이트가 일괄 처리될 때에도 count가 올바르게 증가하도록 보장합니다.

결론

React의 일괄 업데이트는 불필요한 리렌더링을 줄여 성능을 최적화하는 강력한 메커니즘입니다. 일괄 업데이트의 작동 방식, 한계, 그리고 이를 효과적으로 활용하는 방법을 이해하는 것은 고성능 React 애플리케이션을 구축하는 데 매우 중요합니다. 이 글에서 설명한 모범 사례를 따르면 React 애플리케이션의 반응성과 전반적인 사용자 경험을 크게 향상시킬 수 있습니다. React 18이 자동 일괄 처리를 도입함에 따라 상태 변경 최적화는 더욱 간단하고 효과적이 되어 개발자들이 멋진 사용자 인터페이스를 구축하는 데 집중할 수 있게 해줍니다.